import React from 'react'
import { useState } from 'react'
import A from './A';
import B from './B';
import C from './C';

export default function DiffCom() {
  //声明状态
  let [count, setCount]  = useState(0);
  let click = () => {
    setCount(count + 1);
  }
  return (
    <div className='container'>
      <h2>diff 演示</h2>
      <hr />
      <h4>1. 比较不同类型的元素</h4>
      {count % 2 === 0 ? <span>你好</span> : <a href="#">你好啊</a>}
      {count % 2 === 0 ? <A  /> : <B  />}
      <hr />


      <h4>2. 对比相同类型的元素</h4>
      {count % 2 === 0 ? <span className="abc">AAA</span> : <span className="xyz">BBB</span>}
      {count % 2 === 0 ? <C name="abc" /> : <C name="xyz" />}


      <hr />
      <button className='btn btn-primary' onClick={click}>更新</button>
    </div>
  )
}
